<template>
  <el-container class="main_con">
    <div class="filter_con ds_block" style="margin-bottom:10px">
      <div class="filter_head flex_div"><h2>会员等级列表</h2></div>
    </div>
    <div class="list_con nopt" style="padding-top: 10px;">
      <div style="width:100%">
        <div class="flex_div">
          <el-button type="primary" @click="showAddLevel">新建会员等级</el-button>
          <div>
            <div class="filter_area">
              <label>名称：</label>
              <el-input v-model="obj.name" size="medium" class="serach_input" placeholder="等级名称"></el-input>
              <label class="ml_15">等级：</label>
              <el-input v-model="obj.level" size="medium" class="serach_input" placeholder="等级"></el-input>
              <label class="ml_15">状态：</label>
              <el-select v-model="obj.status" placeholder="请选择" class="serach_input mr_15" size="medium">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-button class="mr_15" @click="searchData" size="medium">搜索</el-button>
            </div>
          </div>
        </div>

        <el-table :data="dataList" style="width: 100%" class="mt_15">
          <el-table-column prop="name" label="名称" width="120"></el-table-column>
          <!-- <el-table-column prop="title" label="标题" width="180"></el-table-column> -->
          <el-table-column prop="level" label="等级" width="100"></el-table-column>
          <el-table-column prop="" label="升级条件(消费金额)">
            <template slot-scope="scope">
              <span v-if="scope.row.is_cash_upgrade">{{ scope.row.reach_cash }}元</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="升级条件(购买升级)">
            <template slot-scope="scope">
              <span v-if="scope.row.is_buy_upgrade">{{ scope.row.buy_price }}元</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="有效时长:天" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.indate }}天</span>
            </template>
          </el-table-column>
          <el-table-column label="会员折扣" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.discount }}折</span>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">启用</span>
              <span v-if="scope.row.status == 0">禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="editStatus(scope.row.id)">{{ scope.row.status == 0 ? '启用' : '禁用' }}</el-button>
              <el-button type="text" @click="detailHudle(scope.row)">详情</el-button>
              <el-button type="text" @click="editData(scope.row.id)">修改</el-button>
              <el-button type="text" @click="deleteData(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table_footer">
        <el-pagination @current-change="changePage" :current-page="page" class="pages" background layout="prev, pager, next" :total="total" hide-on-single-page></el-pagination>
      </div>
    </div>
    <el-dialog title="新建会员等级" top="80px" :visible.sync="addDialog" :before-close="handleClose" :width="form.is_present_coupon == 1 ? '1260px' : '980px'">
      <el-form size="small" ref="form" :model="form" :rules="formRules" label-width="140px" class="form">
        <div style="padding-right:120px">
          <el-form-item label="会员等级" prop="level">
            <el-input-number style="width:250px;" v-model="form.level" :controls="false" :step="1" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label="等级名称" prop="name"><el-input style="width:250px;" v-model="form.name" maxlength="10" show-word-limit></el-input></el-form-item>
          <el-form-item label="标题"><el-input style="width:250px;" v-model="form.title" maxlength="20" show-word-limit></el-input></el-form-item>
          <el-form-item label="会员折扣">
            <div class="u-flex num_div">
              <el-input-number style="width:200px;" v-model="form.discount" :controls="false" :precision="1" :step="0.1" :max="10"></el-input-number>
              <div class="input_tip">折</div>
            </div>
          </el-form-item>

          <el-form-item label="有效时长">
            <div class="u-flex num_div">
              <el-input-number style="width:200px;" v-model="form.indate" :controls="false" :step="1" ></el-input-number>
              <div class="input_tip">天</div>
            </div>
          </el-form-item>

          <el-form-item label="累计金额自动升级"><el-switch :active-value="1" :inactive-value="0" v-model="form.is_cash_upgrade"></el-switch></el-form-item>
          <el-form-item label="累计金额" v-if="form.is_cash_upgrade == 1">
            <el-input v-model.number="form.reach_cash">
              <template slot="append">
                元
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="购买升级"><el-switch :active-value="1" :inactive-value="0" v-model="form.is_buy_upgrade"></el-switch></el-form-item>
          <el-form-item label="购买价格" v-if="form.is_buy_upgrade == 1">
            <el-input v-model="form.buy_price">
              <template slot="append">
                元
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="会员权益">
            <el-select class="select-div" multiple v-model="form.content_id">
              <el-option v-for="(item, i) in rightslist" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="赠送">
            <el-checkbox v-if="is_coupon" :true-label="1" :false-label="0" v-model="form.is_present_coupon">优惠券</el-checkbox>
            <el-checkbox v-if="is_deduction" :true-label="1" :false-label="0" v-model="form.is_present_integer">积分</el-checkbox>
            <el-checkbox :true-label="1" :false-label="0" v-model="form.is_present_money">余额</el-checkbox>
            <div class="box" v-if="form.is_present_coupon || form.is_present_integer || form.is_present_money">
              <el-form-item v-if="form.is_present_coupon" label="优惠券">
                <el-button @click="showSelectCon = true">添加优惠卷</el-button>
                <el-table class="mt_15" :data="selectCon">
                  <el-table-column prop="name" label="优惠卷" width="180"></el-table-column>
                  <el-table-column prop="conditions" label="满" width="180"></el-table-column>
                  <el-table-column prop="denomination" label="减" width="180"></el-table-column>
                  <el-table-column prop="total_limit" label="库存"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" @click="deleteCon(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-form-item v-if="form.is_present_integer" label="积分"><el-input v-model="form.present_integer" style="width: 300px;"></el-input></el-form-item>
              <el-form-item v-if="form.is_present_money" label="余额"><el-input v-model="form.present_money" style="width: 300px;"></el-input></el-form-item>
            </div>
          </el-form-item>

          <el-form-item label="状态" label-width="160px">
            <el-radio-group v-model="form.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="AddLevel">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择优惠券" :visible.sync="showSelectCon" width="50%" append-to-body>
      <SelectConpon :key="rke" :data="selectCon" @outData="closeCon"></SelectConpon>
    </el-dialog>
    <el-dialog title="会员详情" :visible.sync="showdetail" width="600px" append-to-body>
      <el-row :gutter="20">
        <el-col :span="12">
          <ul class="l_ul">
            <li class="l_li">
              <span>会员名称：</span>
              <span>{{ detail.name }}</span>
            </li>
            <li class="l_li">
              <span>会员等级：</span>
              <span>{{ detail.level }}</span>
            </li>
          </ul>
        </el-col>
        <el-col :span="12">
          <ul class="l_ul">
            <li>
              <span>会员折扣：</span>
              <span>{{ detail.discount }}折</span>
            </li>
            <li>
              <span>有效时长：</span>
              <span>{{ detail.indate }}天</span>
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-divider content-position="left">升级条件</el-divider>
      <el-row :gutter="20">
        <!-- <span class="t_title" style="padding-left: 10px;">升级条件：</span> -->
        <el-col :span="12">
          <ul class="l_ul m_5">
            <li class="l_li">
              <span>消费金额：</span>
              <span v-if="detail.is_cash_upgrade">{{ detail.reach_cash }}</span>
              <span v-else>--</span>
            </li>
          </ul>
        </el-col>
        <el-col :span="12">
          <ul class="l_ul m_5">
            <li>
              <span>购买升级：</span>
              <span v-if="detail.is_buy_upgrade">{{ detail.buy_price }}</span>
              <span v-else>--</span>
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-row>
        <el-divider content-position="left">开卡赠送</el-divider>
        <ul class="l_ul m_5">
          <li>
            <span>赠送积分：</span>
            <span v-if="detail.is_present_integer">{{ detail.present_integer }}</span>
            <span v-else>--</span>
          </li>
          <li>
            <span>赠送余额：</span>
            <span v-if="detail.is_present_money">{{ detail.present_money }}</span>
            <span v-else>--</span>
          </li>
          <li>
            <span>优惠券：</span>
            <span v-if="detail.is_present_coupon" v-for="(item, i) in detail.present_coupon">{{ item.name }},</span>
            <span v-else>--</span>
          </li>
        </ul>
        <el-divider content-position="left">会员权益</el-divider>
        <ul class="l_ul" v-if="detail.content && detail.content.length > 0">
          <li v-for="(item, i) in detail.content" :key="i">
            <span>权益{{ i + 1 }}：</span>
            {{ item.text }}
          </li>
        </ul>
        <ul v-else>
          <li><span>--</span></li>
        </ul>

        <el-divider content-position="left">状态</el-divider>
        <ul class="l_ul">
          <li>
            <span>启用状态：</span>
            <span>{{ detail.status ? '开启' : '关闭' }}</span>
          </li>
        </ul>
      </el-row>
    </el-dialog>
  </el-container>
</template>

<script>
import {contentlist, getMembershipList, addMembership, deleteMembership, getMembership, editMembership} from '@/api/mall/vipuser';
import SelectConpon from '@/components/SelectConpon/index';
import draggable from 'vuedraggable';
import Upload from '@/components/Upload/SingleImage2';
import Linkdiv from '@/components/Link/index';
import {getCouponList} from '@/api/shop/marketing';
import {jur_addons_item, jur_addons} from '@/utils/jurisdiction';
export default {
  data() {
    return {
      obj: {
        name: '',
        level: '',
        title: '',
        status: -1
      },
      options: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '禁用'
        },
        {
          value: 1,
          label: '启用'
        }
      ],
      rightslist: [],
      objTemp: {},
      page: 1,
      size: 10,
      total: 0,
      dataList: [],
      form: {
        name: '',
        title: '',
        content: [],
        content_id: [],
        level: 1,
        indate: 30,
        discount: 9,
        is_cash_upgrade: 0,
        is_buy_upgrade: 0,
        is_present_money: 0,
        is_present_integer: 0,
        is_present_coupon: 0,
        status: 0,
        present_coupon: []
      },
      formRules: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}, {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}],
        level: [
          {required: true, message: '请输入等级', trigger: 'blur'},
          {
            pattern: /^(1|[1-9]\d?|100)$/,
            message: '范围在1-100',
            trigger: 'blur'
          }
        ]
      },
      addDialog: false,
      showSelectCon: false,
      showdetail: false,
      detail: {},
      rke: 0,
      selectCon: [],
      is_coupon:false,
      is_deduction:false
    };
  },
  components: {
    SelectConpon,
    draggable,
    Upload,
    Linkdiv
  },
  created() {
    jur_addons([7, 3]).then(res => {
      if (res[3]) {
        this.is_coupon = true;
      }

      if (res[7]) {
        this.is_deduction = true;

      }
    });
    this.contentlist();
    this.searchData();
  },
  methods: {
    deleteCon(id) {
      let i = this.selectCon.findIndex(_ => _.id == id);
      this.selectCon.splice(i, 1);
      this.form.present_coupon.splice(i, 1);
    },
    getCouponList(list) {
      let ids = [];
      list.forEach(c => {
        ids.push(c.id);
      });

      let data = {
        id: ids
      };
      getCouponList(data, 1, 100).then(res => {
        this.selectCon = res.msg.data;
      });
    },
    detailHudle(item) {
      this.detail = item;
      this.showdetail = true;
    },
    contentlist() {
      let data = {
        page: 1,
        size: 100
      };
      contentlist(data).then(res => {
        this.rightslist = res.msg.data;
      });
    },
    // 获取列表
    getData() {
      let data = {
        ...this.objTemp
      };
      getMembershipList(this.page, this.size, data).then(res => {
        let data = res.msg.data;
        data.forEach(item => {
          // if (item.content) {
          //   item.content = JSON.parse(item.content);
          // }

          if (item.is_present_coupon && item.present_coupon) {
            item.present_coupon = JSON.parse(item.present_coupon);
          }
        });
        this.dataList = data;
        console.log(this.dataList);
        this.total = res.msg.total;
      });
    },
    // 查询
    searchData() {
      this.objTemp = Object.assign({}, this.obj);
      //处理过滤status字段
      if (this.objTemp.status == -1) {
        delete this.objTemp.status;
      }
      this.getData();
    },
    // 添加 || 修改
    AddLevel() {
      let _this = this;
      this.$refs['form'].validate(valid => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(_this.form));
          delete data.status_text;
          let coupon = [];
          if (data.present_coupon && data.is_present_coupon) {
            let present_coupon = JSON.parse(JSON.stringify(data.present_coupon));
            present_coupon.forEach(a => {
              coupon.push({id: a.id, name: a.name});
            });
            data.present_coupon = JSON.stringify(coupon);
          }

          console.log(data);

          // data.present_coupon;
          if (!data.update_time) {
            addMembership(data).then(res => {
              _this.searchData();
              _this.addDialog = false;
            });
          } else {
            editMembership(data).then(res => {
              _this.searchData();
              _this.addDialog = false;
            });
          }
        }
      });
    },
    // 删除
    deleteData(id) {
      let _this = this;
      this.$confirm('确认删除？')
        .then(_ => {
          let data = {id};
          deleteMembership(data).then(res => {
            _this.searchData();
          });
        })
        .catch(_ => {});
    },
    // 取消
    cancel() {
      this.handleClose();
    },
    editStatus(id) {
      let data = {id};
      getMembership(data).then(res => {
        let data = res.msg;
        delete data.status_text;
        data.status == 1 ? (data.status = 0) : (data.status = 1);
        editMembership(data).then(res => {
          this.searchData();
        });
      });
    },
    editData(id) {
      let data = {id};
      getMembership(data).then(res => {
        let data = res.msg;
        // if (data.content) {
        //   data.content = JSON.parse(data.content);
        // }
        data.content_id = [];
        data.content.forEach(a => {
          data.content_id.push(a.id);
        });
        data.present_coupon = JSON.parse(data.present_coupon);
        if (data.is_present_coupon && data.present_coupon) {
          // data.present_coupon = JSON.parse(data.present_coupon);
          console.log(data.present_coupon);
          this.getCouponList(data.present_coupon);
        }

        this.form = data;
        this.addDialog = true;
      });
    },
    //关闭选择优惠券框
    closeCon(data) {
      this.showSelectCon = false;
	  if(data){
      this.selectCon=data
		  this.form.present_coupon = [];
		  data.forEach(a => {
		    this.form.present_coupon.push({
		      conditions: a.conditions,
		      name: a.name,
		      id: a.id,
		      denomination: a.denomination,
		      total_limit: a.total_limit
		    });
		  });
	  }
    
      // this.form.present_coupon = data;
    },
    handleClose() {
      this.addDialog = false;
      this.$refs['form'].resetFields();
    },
    showAddLevel() {
      this.form = {
        name: '',
        title: '',
        content: [],
        content_id: [],
        level: 1,
        indate: 30,
        discount: 9,
        is_cash_upgrade: 0,
        is_buy_upgrade: 0,
        is_present_money: 0,
        is_present_integer: 0,
        is_present_coupon: 0,
        status: 0,
        present_coupon: []
      };
      this.addDialog = true;
    },
    changePage(page) {
      this.page = page;
      this.searchData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addlist() {
      let b = (this.form.content.length % 5) + 1;
      this.form.content.push({
        icon: window.location.origin + '/static/images/btns' + b + '.png',
        linkdata: {
          name: '',
          id: '',
          type: ''
        },
        text: '按钮文字' + (this.form.content.length + 1)
      });
    },
    dellist(i) {
      this.form.content.splice(i, 1);
    },
    selectlink(item, i) {
      this.acivedata = item;
      this.activid = i;
      this.$parent.showlinkselcet(item);
    },
    //获取图片
    getImage(data, i) {
      this.form.content[i].icon = data;
    }
  }
};
</script>
<style type="text/css" lang="scss">
.num_div {
  .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
}
.select-div {
  width: 250px;
  .el-icon-close {
    font-size: 12px;
  }
}
</style>
<style lang="scss" scoped>
.filter_head {
  h2 {
    margin: 10px 0;
  }
}
.flex_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form {
  display: flex;
  .form_content {
    margin-left: 100px;
  }
  .form_content:first-child {
    margin-left: 20px;
  }
  .el-input {
    width: 250px;
  }
}
.container {
  width: 320px;
  display: flex;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;
  line-height: 35px;
  .el-input {
    width: 180px;
  }
  .icon_box {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    //border: 1px solid #dcdfe6;
    position: relative;

    // .icon-abl-close {
    //   position: absolute;
    //   top: -6px;
    //   right: -9px;
    //   color: rgba(0, 0, 0, 0.3);
    //   font-size: 16px;
    // }

    &:hover {
      .choose_bar {
        display: block;
      }
    }

    .choose_bar {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      line-height: 18px;
      text-align: center;
      width: 100%;

      i.txt {
        display: inline-block;
        font-style: normal;
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
        letter-spacing: 2px;
      }
    }
  }
}
.info {
  display: flex;
  flex-direction: column;
  div {
    span:first-child {
      font-weight: bold;
      color: #333;
    }
  }
}

.input_tip {
  padding: 0 18px;
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-radius: 0 4px 4px 0;
  border-left: none;
  height: 32px;
}
.box {
  margin-top: 10px;
  background-color: #f4f6f8;
  padding: 30px 20px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 20px;
  color: #262b30;
}
.l_ul {
  li {
    margin-bottom: 10px;
    span:first-child {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      margin-right: 10rpx;
      display: inline-block;
      width: 80px;
    }
  }
  &.m_5 {
    li {
      margin-bottom: 5px;
    }
  }
}
.t_title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
  margin-top: 10px;
}
</style>
